<template>
  <div class="ai-translation-analysis">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
      <router-link to="/english/ai-translation" class="text-dark">
        <i class="bi bi-chevron-left fs-4"></i>
      </router-link>
      <h5 class="mb-0 mx-auto">参考译文</h5>
    </div>

    <!-- 分析内容 -->
    <div class="analysis-content">
      <!-- 原文回顾 -->
      <div class="original-text bg-white p-4 mb-3">
        <h6 class="mb-3">原文</h6>
        <div class="english-text" v-html="highlightVocabs(translationText)"></div>
      </div>

      <!-- 参考译文 -->
      <div class="reference-translation bg-white p-4 mb-3">
        <h6 class="mb-3">参考译文</h6>
        <p>{{ referenceTranslation }}</p>
      </div>

      <!-- 翻译要点 -->
      <div class="translation-points bg-white p-4 mb-3">
        <h6 class="mb-3">翻译要点</h6>
        <div class="point-item" v-for="(point, index) in translationPoints" :key="index">
          <div class="point-header">
            <span class="point-label">要点 {{ index + 1 }}</span>
          </div>
          <p class="point-content">{{ point }}</p>
        </div>
      </div>

      <!-- 词汇解析 -->
      <div class="vocab-analysis bg-white p-4">
        <h6 class="mb-3">重点词汇解析</h6>
        <div class="vocab-item" v-for="(vocab, index) in vocabAnalysis" :key="index">
          <div class="vocab-header">
            <span class="vocab-word">{{ vocab.word }}</span>
          </div>
          <p class="vocab-explanation">{{ vocab.explanation }}</p>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-tools position-fixed bottom-0 w-100 bg-white p-3">
      <button class="btn btn-primary w-100" @click="backToExercise">
        返回练习
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AITranslationAnalysisView',
  
  data() {
    return {
      vocabList: ['sustainable', 'resilient', 'deteriorate'],
      translationText: 'The sustainable development of modern cities depends on their ability to remain resilient in the face of challenges. Without proper maintenance, urban infrastructure will gradually deteriorate, affecting the quality of life for residents.',
      referenceTranslation: '现代城市的可持续发展取决于它们在面对挑战时保持韧性的能力。如果缺乏适当的维护，城市基础设施将逐渐退化，影响居民的生活质量。',
      translationPoints: [
        '注意"sustainable development"是一个固定搭配，译为"可持续发展"',
        '"remain resilient"强调持续性，可译为"保持韧性"',
        '条件状语从句的处理：Without... 可译为"如果缺乏..."',
        '注意"deteriorate"的递进含义，用"逐渐退化"来表达'
      ],
      vocabAnalysis: [
        {
          word: 'sustainable',
          explanation: '可持续的；在环境保护语境中常用，强调长期发展与环境保护的平衡'
        },
        {
          word: 'resilient',
          explanation: '有弹性的，有韧性的；形容在面对困难时能够恢复和适应的能力'
        },
        {
          word: 'deteriorate',
          explanation: '恶化，退化；常用来描述状况逐渐变差的过程'
        }
      ]
    }
  },

  methods: {
    highlightVocabs(text) {
      let highlightedText = text
      this.vocabList.forEach(vocab => {
        const regex = new RegExp(vocab, 'gi')
        highlightedText = highlightedText.replace(
          regex, 
          `<span class="target-vocab">${vocab}</span>`
        )
      })
      return highlightedText
    },

    backToExercise() {
      this.$router.push('/english/ai-translation')
    }
  }
}
</script>

<style scoped>
.ai-translation-analysis {
  background-color: #f0f9f9;
  min-height: 100vh;
  padding-bottom: 80px;
}

.header {
  padding: 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 15px;
}

.analysis-content {
  padding: 0 15px;
}

.original-text, .reference-translation, .translation-points, .vocab-analysis {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

:deep(.target-vocab) {
  background: rgba(64, 224, 208, 0.1);
  border-bottom: 2px solid #40e0d0;
  padding: 0 2px;
}

.point-item {
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
}

.point-label {
  display: inline-block;
  padding: 2px 8px;
  background: #E0FFFF;
  color: #4A90E2;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.vocab-item {
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
}

.vocab-word {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(64, 224, 208, 0.1);
  color: #40e0d0;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.vocab-explanation {
  color: #666;
  margin-bottom: 0;
}

.bottom-tools {
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
</style> 